import { Component } from 'react'
import { GET_NEWS } from '../store/actionType'
import { connect } from 'react-redux'
import { getNewsList } from '../api'
import store from '../store'

class NewsConnect extends Component {
	constructor(props) {
		super(props)
		const { news } = store.getState()
		this.state = { news }
	}
	render() {
		const { news = [], updateNews } = this.props
		return (
			<div>
				<button onClick={updateNews}>刷新store中news</button>
				{news.map((o, i) => (
					<div key={i}>
						<span>{o.name}</span>
						<span>{o.id}</span>
					</div>
				))}
			</div>
		)
	}
}

const mapStateToProps = state => {
	return {
		news: state.news,
	}
}

const mapDispatchToProps = dispatch => {
	return {
		updateNews: async () => {
			const news = await getNewsList()
			dispatch({ type: GET_NEWS, news })
		},
	}
}

export default connect(mapStateToProps, mapDispatchToProps)(NewsConnect)
